<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页插件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        .pagination {
            width: 700px;
            height: 50px;
            margin: 0 auto;
        }

        a {
            display: inline-block;
            height: 34px;
            line-height: 34px;
            border: 1px solid #ccc;
            padding: 0 12px;
            font-size: 16px;
            color: blue;
            background-color: #fff;
            cursor: pointer;
            user-select: none;
            /*不允许用户选择*/
        }

        .active {
            color: red;
        }

        .disabled {
            color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <div class="pagination">
        <!-- <a class="item prevPage">上一页</a>
        <a class="item firstPage">首页</a>
        <a class="item">1</a>
        <a class="item">2</a>
        <a class="item">3</a>
        <a class="item">4</a>
        <a class="item">5</a>
        <a class="item">6</a>
        <a class="item nextPage">下一页</a>
        <a class="item lastPage">尾页</a>
        <span class="info">当前第*页/共*页</span> -->
    </div>
    <script>
        (function () {
            var totalPage = 50;// 总页数
            var currPage = 13;// 当前选中页
            var rangePage = 8;//显示几页的页码
            var container = document.querySelector(".pagination");
            function createPagination(totalPage, currPage, rangePage, container) {
                container.innerHTML = '';
                // 1. 创建容器
                var divPager = document.createElement('div');
                divPager.className = 'pager';

                /*
                    * className:要挂的样式类
                    * text:中间文本
                    * newPage: 点击后跳转到哪一页
                    */
                function createAnchor(className, text, newPage) {
                    var a = document.createElement('a');
                    a.className = className; // 挂上对应的样式类
                    a.innerText = text; // 设置中间的文本
                    divPager.appendChild(a);
                    // 点击这个 a 标签跳转到第几页
                    a.onclick = function () {
                        // 分析：所谓跳转，其实就是重新调用 createPagination
                        // 但是，你要注意，有几种情况是不能够跳转
                        if (newPage < 1 || newPage > totalPage || newPage === currPage) {
                            return;
                        }
                        // 没有进入到上面的 if，说明是可以跳转的
                        createPagination(totalPage, newPage, rangePage, container);
                        // 分页跳转之后，还会做其他的事情
                        // 发送请求获取数据....
                    }
                }


                // 2. 我们要开始创建分页
                // 通过分析：我们发现创建这个分页可以分为 4 个部分
                // （1）首页和上一页
                if (currPage === 1) {
                    // 说明当前是第一页
                    // 由于考虑到创建具体分页项目的逻辑要用的地方很多，所以我也将其封装成一个函数
                    // 该函数需要知道的信息：1. 要不要挂样式类 2. 中间的文本写什么 3. 点击后跳转到第几页
                    createAnchor('disabled', '首页', 1)
                    createAnchor('disabled', '上一页', currPage - 1)
                } else {
                    createAnchor('', '首页', 1)
                    createAnchor('', '上一页', currPage - 1)
                }

                // （2）中间的数字
                // 首先我们需要计算一头一尾
                var min = Math.floor(currPage - rangePage / 2);
                if (min < 1) {
                    min = 1;
                }

                var max = min + rangePage - 1;
                if (max > totalPage) {
                    max = totalPage;
                }

                // 接下来我们就需要通过循环来生成分页项目
                for (var i = min; i <= max; i++) {
                    if (i === currPage) {
                        // 进入此 if，说明是当前页，需要挂上 active 类
                        createAnchor("active", i, i);
                    } else {
                        createAnchor("", i, i)
                    }
                }


                // （3）下一页和尾页
                if (currPage === totalPage) {
                    // 说明当前是第一页
                    // 由于考虑到创建具体分页项目的逻辑要用的地方很多，所以我也将其封装成一个函数
                    // 该函数需要知道的信息：1. 要不要挂样式类 2. 中间的文本写什么 3. 点击后跳转到第几页
                    createAnchor('disabled', '下一页', currPage + 1)
                    createAnchor('disabled', '尾页', totalPage)
                } else {
                    createAnchor('', '下一页', currPage + 1)
                    createAnchor('', '尾页', totalPage)
                }

                // （4）当前页码
                var span = document.createElement('span');
                span.innerText = currPage + "/" + totalPage;
                divPager.appendChild(span);

                // 以后将生成好的整个分页组件挂到容器上面即可
                container.appendChild(divPager);
            }

            createPagination(totalPage, currPage, rangePage, container)
        })()

    </script>
</body>

</html>